<template>
  <transition name="about-us">
    <div class="about_us">
      <BackNavigation v-bind:title-info="titleInfo"/>
      <div class="icon-info">
        <img src="../../assets/img/mingcai_icon.png" alt="">
        <p>盛铭吉（北京）建设有限公司</p>
        <p>{{ '版本号：v' + version }}</p>
      </div>
      <div class="p-container">
        <p>{{ decriptionInfo }}</p>
      </div>
      <div class="copyright">
        <p>Copyright2017-2018</p>
        <p>盛铭吉（北京）建设有限公司版权所有</p>
      </div>
    </div>
  </transition>
</template>

<script>
  import * as recommend from 'api/recommend'
  import BackNavigation from './navigation.vue'

  export default {
    name: 'about_us',
    components: {
      BackNavigation
    },
    data () {
      return {
        titleInfo: {
          leftTitle: '返回',
          title: '关于我们',
          rightTitle: ''
        },
        decriptionInfo: '',
        version: ''
      }
    },
    computed: {
      getVerson () {
//        let packageJson = require('../../../package.json')
//        return packageJson.version
        return '1.0.0'
      }
    },
    methods: {
//      getVerson () {
//        return '1.0.0'
//      }
    },
    created () {
      recommend.get_about_us_info().then(resault => {
        console.log(123)
        if (resault.status === 200) {
          this.decriptionInfo = resault.data.data
        }
        console.log(resault.data)
      }).catch(resault => {
        console.log(resault)
      })
      let packageJson = require('../../../package.json')
      this.version = packageJson.version
    },
    activated () {
    }
  }
</script>

<style lang="scss">
  div.about_us {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: white;

    >div.icon-info {
      position: relative;
      margin-top: 44px;
      width: 100%;
      height: auto;

      >img {
        margin-top: 20px;
        width: 100px;
        height: 100px;
      }

      >p {
        margin-top: 10px;
        color: rgb(66, 66, 66);
        font-weight: bold;
        font-size: 14px;
      }

      >p:last-child {
        color: rgb(133, 133, 133);
        font-size: 12px;
      }
    }

    >div.p-container {
      position: relative;
      padding: 0 15px 0 15px;
      margin-top: 20px;
      width: 100%;
      height: auto;

      >p {
        color: rgb(66, 66, 66);
        font-size: 12px;
      }
    }

    >div.copyright {
      /*position: absolute;*/
      margin-top: 40px;
      padding: 0 15px 0 15px;
      /*bottom: 20px;*/
      width: 100%;
      height: auto;

      >p {
        margin-top: 10px;
        color: rgb(133, 133, 133);
        /*font-weight: bold;*/
        font-size: 12px;
      }
    }
  }

  /*!* 开始过渡阶段,动画出去阶段 *!*/
  /*.about-us-enter-active,.about-us-leave-active{*/
    /*transition: all 0.3s ease-out;*/
  /*}*/
  /*!* 进入开始 *!*/
  /*.about-us-enter{*/
    /*transform: translateX(100%);*/
    /*opacity: 0;*/
  /*}*/
  /*!* 出去终点 *!*/
  /*.about-us-leave-active{*/
    /*transform: translateX(100%);*/
    /*opacity: 0;*/
  /*}*/
</style>
